﻿@model SILAS.Entidades.Visita

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_layoutGeneral.cshtml";
}

<script type="text/javascript">


    $(function () {
        $("#FecVisita").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-mm-dd",
                yearRange: "1950:2012"

            });

     });

	</script>


    <script type="text/javascript">


        $(function () {

            

            /*  Autocompletar ciudadano y empleado   */

            var ciudadano;
            var empleado;

            $("#txtBuscarCiudadano").autocomplete({
                source: '@Url.Action("GetCiudadanos", "Ciudadano")',
                minLength: 1,
                focus: function (event, ui) {

                    var select = ui.item;
                    $("#txtBuscarCiudadano").val(select.label);
                    return false;
                },
                select: function (event, ui) {
                    var select = ui.item;
                    $("#txtBuscarCiudadano").val(select.label);
                    ciudadano = select.ciudadano;
                    return false;
                }
            });

            $("#add").click(function (e) {
                e.preventDefault();

                var row = $("#tblCiudadanos >tbody >tr").length;

                if (row == 0) {

                    var filaTable = '<tr>';
                    filaTable += '<td> <input type=\"hidden\" name=\"DetalleVisitas[' + row + '].IdCiudadano\" value=\"' + ciudadano.IdCiudadano + '\" />' + ciudadano.Nombres + ' ' + ciudadano.ApPaterno + ' ' + ciudadano.ApMaterno + '</td>';
                    filaTable += '<td>' + ciudadano.DNI + '</td>' + '<td><a href=\"#\" class =\"deleteLink\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Eliminar Ciudadano\" /></a></td>';
                    filaTable = filaTable + '</tr>';

                    $("#tblCiudadanos tbody").append(filaTable).fadeIn("slow");
                }
                else {
                    var sinerrores = true;

                    $("#tblCiudadanos  tbody tr td:nth-child(1)").each(function (index, element) {
                        var IdCiudadano = $(element).find("input:eq(0)").val();
                        if (IdCiudadano == ciudadano.IdCiudadano) {
                            sinerrores = false;
                            return;
                        }
                    });


                    if (sinerrores) {

                        var filaTable = '<tr>';
                        filaTable += '<td> <input type=\"hidden\" name=\"DetalleVisitas[' + row + '].IdCiudadano\" value=\"' + ciudadano.IdCiudadano + '\" />' + ciudadano.Nombres + ' ' + ciudadano.ApPaterno + ' ' + ciudadano.ApMaterno + '</td>';
                        filaTable += '<td>' + ciudadano.DNI + '</td>' + '<td><a href=\"#\" class =\"deleteLink\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Eliminar Ciudadano\" /></a></td>';
                        filaTable = filaTable + '</tr>';

                        $("#tblCiudadanos tbody").append(filaTable).fadeIn("slow");

                    }
                    else {
                        alert('El Ciudadano ya esta como participante');
                    }
                }

                document.getElementById("txtBuscarCiudadano").value = "";

            });

        });

        $(function () {
            $("#txtBuscarEmpleado").autocomplete({
                source: '@Url.Action("GetEmpleado", "Empleado")',
                minLength: 1,
                focus: function (event, ui) {
                    var select = ui.item;
                    $("#txtBuscarEmpleado").val(select.label);
                    return false;
                },
                select: function (event, ui) {
                    var select = ui.item;
                    $("#txtBuscarEmpleado").val(select.label);
                    empleado = select.empleado;
                    return false;
                }
            });

            $("#add2").click(function (e) {
                e.preventDefault();

                var row = $("#tblEmpleado >tbody >tr").length;

                if (row == 0) {
                    var filaTable = '<tr>';
                    filaTable += '<td> <input type=\"hidden\" name=\"DetalleVisitas[' + row + '].IdEmpleado\" value=\"' + empleado.IdEmpleado + '\" />' + empleado.Nombres + ' ' + empleado.ApPaterno + ' ' + empleado.ApMaterno + '</td>';
                    filaTable += '<td>' + empleado.DNI + '</td>';
                    filaTable += '<td>' + empleado.Cargo + '<td><a href=\"#\" class =\"deletempli\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Eliminar Empleado\" /></a></td>';
                    filaTable = filaTable + '</tr>';

                    $("#tblEmpleado tbody").append(filaTable).fadeIn("slow");
                }
                else {
                    var sinErrores = true;

                    $("#tblEmpleado  tbody tr td:nth-child(1)").each(function (index, element) {
                        var IdEmpleado = $(element).find("input:eq(0)").val();
                        if (IdEmpleado == empleado.IdEmpleado) {
                            sinErrores = false;
                            return;
                        }
                    });

                    if (sinErrores) {
                        var filaTable = '<tr>';
                        filaTable += '<td> <input type="hidden" name=\"DetalleVisitas[' + row + '].IdEmpleado\" value=\"' + empleado.IdEmpleado + '\" />' + empleado.Nombres + ' ' + empleado.ApPaterno + ' ' + empleado.ApMaterno + '</td>';
                        filaTable += '<td>' + empleado.DNI + '</td>';
                        filaTable += '<td>' + empleado.Cargo + '<td><a href=\"#\" class =\"deletempli\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Eliminar Empleado\" /></a></td>';
                        filaTable = filaTable + '</tr>';

                        $("#tblEmpleado tbody").append(filaTable).fadeIn("slow");
                    }
                    else {
                        alert('El Empleado ya esta como participante');
                    }

                }
                document.getElementById("txtBuscarEmpleado").value = "";
            });

            /* Eliminar Ciudadano   */

            $(".deleteLink").live("click", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#tblCiudadanos  tbody tr").each(function (index, element) {
                        var fila = $(element);
                        $(fila).find('input[name$="IdCiudadano"]').attr("name", "DetalleVisitas[" + index + "].IdCiudadano");
                    });
                });
            });

            /* Eliminar Empleado   */

            $(".deletempli").live("click", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#tblEmpleado  tbody tr").each(function (index, element) {
                        var fila = $(element);
                        $(fila).find('input[name$="IdEmpleado"]').attr("name", "DetalleVisitas[" + index + "].IdEmpleado");
                    });
                });
            });

            /* Mandar formulario by ajax */

            $("#btncrear").click(function () {

                var data = $('form').serialize();

                $.post('@Url.Action("Create", "Visita")',
                         data,
                         function (ok) {
                             if (ok) {
                                 if (ok.exito == true) {
                                     alert(ok.msg);
                                     window.location = '@Url.Action("ListarVisitas", "Visita")';
                                 }
                                 else {
                                     alert(ok.msg);
                                 }
                             }
                         }, "json");
            });

        });
    </script>

<h4><b>Registrar Nueva Visita</b></h4>

<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm("Create", "Visita", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmVisita" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        
        <div id='left' class='ui-widget ui-corner-all' style='float:left;width:25%;margin-top:0.5em;margin-left:0.5em;'>
        <div class="ui-widget-header ui-corner-top" style="padding:0.3em;">
            Visita
        </div>
        <div class="ui-widget-content ui-corner-bottom" style="padding:0.5em;">
              <div class="editor-label">
                @Html.LabelFor(model => model.Fecha)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Fecha, new { @id = "FecVisita" })
                    @Html.ValidationMessageFor(model => model.Fecha)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.Observaciones)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Observaciones)
                    @Html.ValidationMessageFor(model => model.Observaciones)
                </div>
                
                <div class="editor-label">
                    @Html.LabelFor(model => model.Acuerdos)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Acuerdos)
                    @Html.ValidationMessageFor(model => model.Acuerdos)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.IdSector)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.IdSector)
                    @Html.ValidationMessageFor(model => model.IdSector)
                </div>

                <div class="editor-label">
                    @Html.Label("Acta Visita")

            </div>

                <input type="file" name="ActaVisita" />
            
            </div>
        </div>

        <div id='center' class='ui-widget ui-corner-all' style='float:left;width:30%;margin-top:0.5em;margin-left:0.5em;'>
        <div class="ui-widget-header ui-corner-top" style="padding:0.3em;">
            Ciudadanos
        </div>
        <div class="ui-widget-content ui-corner-bottom" style="padding:0.5em;">
             <table id="tblCiudadanos" border="1" cellpadding="3" cellspacing="3">
                <thead>
                  <tr>
                    <th>
                        Nombres
                    </th>
                    <th>
                        DNI
                    </th>
                </tr>
              </thead>

             <tbody>
                      
                  
            </tbody>  
            
            </table>

            @Html.Label("Buscar:")
            @Html.TextBox("txtBuscarCiudadano")
            <button type="button"  id="add">Añadir Ciudadano</button>
            </div>
        </div>
        
        <div id='right' class='ui-widget ui-corner-all' style='float:left;width:40%;margin-top:0.5em;margin-left:0.5em;'>
            <div class="ui-widget-header ui-corner-top" style="padding:0.3em;">
                Empleado
            </div>
            <div class="ui-widget-content ui-corner-bottom" style="padding:0.5em;">
             <table id="tblEmpleado" border="1" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>
                        Nombres
                    </th>
                    <th>
                        DNI
                    </th>
                    <th>
                        Cargo
                    </th>
                </tr>
              </thead>

             <tbody>                   
                  
            </tbody>  
            
            </table>

            @Html.Label("Buscar:")
            @Html.TextBox("txtBuscarEmpleado")
            <button id="add2">Añadir Empleado</button>
            </div>
        </div>
        
        <p style='clear:both;margin-top:10em;padding:1em;'>
                 <!--input type="submit" value="Save" /-->
            <button id="btncrear" type="button">Crear</button> 
            
        </p>
    </fieldset>
}

<div>
<a href="@Url.Action("ListarVisitas", "Visita")">
               <img src="@Url.Content("~/Content/Imagenes/volver.jpg")" title="Volver al Menu" alt="Volver al Menu" />
            </a>
</div>